<template style="margin: 0">
  <div class="myheader">
    <div class="logo">
      <a href="/">
        <img src="../../../static/images/front/logo22.png" alt="">
      </a>
    </div>
    <div class="header">
      <div class="mainMenuUl">
        <li><span>预约饭店</span>
          <ul class="subMenu">
            <li><a href="#resPane"> 全部饭店</a></li>
          </ul>
        </li>
        <li><span>预约厨师</span>
          <ul class="subMenu">
            <li><a href="#chefPane"> 全部厨师</a></li>
          </ul>
        </li>
        <li><span>我的预约</span>
          <ul class="subMenu">
            <li><span><a href="/front/user"> 我的订单</a></span></li>
            <li><a href=""> 我的收藏</a></li>
            <li><a href=""> 账户设置</a></li>
          </ul>
        </li>
        <li><span>关于我们</span>
          <ul class="subMenu">
            <li><a href=""> 加入我们</a></li>
            <li><a href=""> 广告商中心</a></li>
          </ul>
        </li>
      </div>

    </div>
    <div class="loginForm">
       <el-button type="primary" style="background-color:#ca151c;border :solid 0px ;height: 30px;font-size: 14px;line-height: 5px;"><a href="/login" style="text-decoration: none;color: white">登录</a></el-button>
       <el-button type="primary" style="background-color:#ca151c;border :solid 0px ;height: 30px;font-size: 14px;line-height: 5px"><a href="/registered"  style="text-decoration: none;color: white">注册</a></el-button>
    </div>
    <div @mouseenter="show" @mouseleave="closeShow" class="head" v-show="isshowHead">
      <img src=""/>
      <div class="info" v-show="isshowInfo">
       <div> <span>昵称:</span> <span>张三</span></div>
        <div> <span>联系电话:</span> <span>168434546888</span></div>
        <div> <span>注销</span></div>

      </div>
    </div>
   <active></active>
  </div>
</template>

<script>
  import active from '@/components/front/active/index.vue'
  export default {
    name: "header",
    components:{active},
    data() {
      return {
        input4: '',
        isshowHead:true,
        isshowInfo:false
      }
    },
    methods:{
      show(){
        this.isshowInfo = true
      },
      closeShow(){
        this.isshowInfo = false
      }
    }
  }
</script>

<style scoped lang="stylus">
  .myheader
    background-color #b90013
    //background-image: url("/static/images/bg/bg13.jpg");
    margin 0 auto
    width 1000px
    height 90px
    content:""
    display:block
    clear:both
    position relative
    border-radius: 0 0 4px 4px;
    z-index 3
    .loginForm
      position absolute
      width 260px
      right 0
      bottom 15px
      line-height 30px
      button

       margin-left 20px

    .logo
      position absolute

      width 70px
      height 70px
      display block
      a
        text-decoration: none
        color black
      img
        margin 10px 0 0 15px
        width 70px
        height 70px
    .header
      background-color #ca151c
      color white
      width 555px
      height 30px
      text-align: center;
      line-height: 30px;
      left 130px
      position absolute
      bottom 15px
      .mainMenuUl
        content:""
        display:block
        clear:both
        float:left

        line-height 30px;
        width 705px
        height 30px
        font-size 15px
        position: relative;
        li
          &:hover
           .subMenu
            display block
          border-radius: 0 0 4px 4px;
          z-index -1
          list-style: none
          float: left
          width: 139px;
          a
            color black
            text-decoration: none;
          span
            display inline-block
            height:30px;
            opacity: 1;
            width: 130px;
          .subMenu
            display none
            margin 0
            padding 0
          ul
            li
              color black
              margin-top 1px
              background-color white
              top 50px
              left 20px
              a

              span
               color black
               opacity: 1;
               display inline-block
              // background-color #2c3e50
  .head
    width 30px
    height 30px
    border-radius 30px
    position absolute
    right 2px
    bottom 15px
    background-color #ca151c
    .info
      width 230px
      height auto
      position absolute
      padding 6px 6px
      right -2px
      top 32px
      background-color #ca151c
      div
       span
        color white
        font-size 12px
        font-family "微软雅黑"
        padding 0
        display inline-block
        &:nth-child(1)
         width 100px


</style>
